{% extends "UiManager/base.html" %}
{% block title %}任务管理{% endblock %}
{% block new %}
    <button class="btn btn-danger btn-sm fa fa-plus" style="border-radius: 20px" data-toggle="modal" data-target="#newTask">&nbsp;新建任务</button>
{% endblock %}
{% block location %}
    <div class="am-icon-home fa fa-home" style="font-weight: bold;color: grey; float: right;">&nbsp;当前位置： 任务管理 > 任务列表</div>
{% endblock %}
{% load staticfiles %}
{% block css %}
{% endblock %}
{% block js %}
    <script>

    /*新建方法*/
    function createTask() {
        var taskName, envSel, proSel, suiteSel, email, cronTab;
        taskName = $("#taskName").val();//任务名称
        email = $("#email").val();//邮件
        cronTab = $("#cronTab").val();//crontab
        envSel = $("#envSel option:selected").val();//所属环境
        suiteSel = $("#suiteSel").val();//套件

        var data = {
            "task_name": taskName,
            "email": email,
            "crontab": cronTab,
            "suite": suiteSel,
            "env": envSel,
        }
        $.ajax({
            url: '/ui/add_task/',
            type: 'post',
            contentType: 'application/json',
            data: JSON.stringify(data),
            dataType: 'json',
            success: function (res) {
                if (res.code == 0) {
                    //取消方法
                    closeDown()
                    //刷新页面
                    location.reload()
                } else {
                    $("#info").html(res.message);
                }
            }
        });
    }

    /*新建弹窗取消*/
    function closeDown() {
        $('#newTask, #editTask').modal('hide');
        $("#info,#edit_info").html("");
        $("#taskName").val("");             //页面名称
        $("#proSel option:first").prop("selected", 'selected');  //所属项目
        $("#suiteSel option:first").prop("selected", 'selected');  //所属套件
        $("#suiteSel option").remove(); //所属套件
        $("#envSel option:first").prop("selected", 'selected');  //所属环境
        $("#cronTab").val("");           //定时
        $("#email").val("");           //邮件
        $("#delMessage").html("");
        $("#deleteObj").modal("hide");
    }
    /*项目套件联动查询*/
    $('#proSel').on('change', function () {
        $("#suiteSel").find('option').remove();
        var project;
        project = $('#proSel option:selected').val();
        data = {
            'id': project
        };
        $.ajax({
            url: '/ui/get_suite_by_project/',
            type: 'post',
            dataType: 'json',
            data: JSON.stringify(data),
            success: function (res) {
                if (res.status == 0) {
                    var suite = '';
                    for (var i = 0; i < res.content.length; i++) {
                        suite += '<option value="' + res.content[i]["id"] + '">' + res.content[i]["suite_name"] + '</option>';
                    }
                    $("#suiteSel").append(suite);
                }
            }
        });
    });
    $('#edit_proSel').on('change', function () {
        $("#edit_suiteSel").find('option').remove();
        var project;
        project = $('#edit_proSel option:selected').val();
        data = {
            'id': project
        };
        $.ajax({
            url: '/ui/get_suite_by_project/',
            type: 'post',
            dataType: 'json',
            data: JSON.stringify(data),
            success: function (res) {
                if (res.status == 0) {
                    var suite = '';
                    for (var i = 0; i < res.content.length; i++) {
                        suite += '<option value="' + res.content[i]["id"] + '">' + res.content[i]["suite_name"] + '</option>';
                    }
                    $("#edit_suiteSel").append(suite);
                }
            }
        });
    });
    /*编辑页面*/
    function edit(id) {
        $('#editTask').modal('show');
        var data = {
            id: id,
            type: 'edit'
        };
        $.ajax({
            url: '/ui/edit_task/',
            type: 'post',
            data: JSON.stringify(data),
            dataType: 'json',
            success: function (res) {
                $("#edit_taskName").val(res.name);
                $("#edit_envSel").val(res.kwargs.env.id);
                $("#edit_proSel").val(res.kwargs.project.id);
                $("#edit_suiteSel").val(res.kwargs.suite.id);
                $("#edit_cronTab").val(res.description);
                $("#edit_email").val(res.kwargs.email);

                var data = {
                    "id": res.kwargs.project.id
                };
                $.ajax({
                    url: '/ui/get_suite_by_project/',
                    type: 'post',
                    dataType: 'json',
                    data: JSON.stringify(data),
                    success: function (res) {
                        $("#edit_suiteSel").find('option').remove();
                        if (res.status == 0) {
                            var suite = '';
                            for (var i = 0; i < res.content.length; i++) {
                                suite += '<option value="' + res.content[i]["id"] + '">' + res.content[i]["suite_name"] + '</option>';
                            }
                            $("#edit_suiteSel").append(suite);
                        }
                    }
                });
                $("#edit-save").attr("onclick", "editSave(" + id + ")");
            }
        });
    }

    /*编辑保存*/
    function editSave(id) {
        var taskName, envSel, proSel, suiteSel, email, cronTab;
        taskName = $("#edit_taskName").val();//任务名称
        email = $("#edit_email").val();//邮件
        cronTab = $("#edit_cronTab").val();//crontab
        envSel = $("#edit_envSel option:selected").val();//所属环境
        suiteSel = $("#edit_suiteSel").val();//套件

        var data = {
            "type": "edit_save",
            "task_name": taskName,
            "email": email,
            "crontab": cronTab,
            "suite": suiteSel,
            "env": envSel,
        };
        $.ajax({
            url: '/ui/edit_task/',
            type: 'post',
            contentType: 'application/json',
            data: JSON.stringify(data),
            dataType: 'json',
            success: function (res) {
                if (res.code == 0) {
                    //取消方法
                    closeDown();
                    //刷新页面
                    location.reload()
                } else {
                    $("#edit_info").html(res.message);
                }
            }
        });
    }
    /*删除询问方法*/
    function isDel(id) {
        $("#delButton").attr("onclick", "del(" + id + ")");
        $("#deleteObj").modal("show");
    }

    /*删除方法*/
    function del(id) {
        var data = {
          "id": id,
          "type": "delete"
        };
        $.ajax({
            url: '/ui/edit_task/',
            type: 'post',
            contentType: 'application/json',
            dataType: 'json',
            data:JSON.stringify(data),
            success: function (res) {
                if (res.code == 0) {
                    $("#deleteObj").modal("hide");
                    location.reload();
                } else {
                    $("#delMessage").html(res.message);
                }
            }
        });
    }

</script>
{% endblock %}
{% block content %}
    <!--列表-->
    <div id="page-wrapper">
        <div id="page-inner">
            <!-- /. ROW  -->
            <!-- /. 表格  -->
            <div class="row">
                <div class="col-md-12">
                    <!-- Advanced Tables -->
                    <div class="panel panel-default">
                        <!--<div class="panel-heading">表格名字</div>-->
                        <div class="panel-body" style="min-height:500px">
                            <div class="row mar-bottom-20">
                                <div class="form-inline">
                                    <form id="pro_filter" method="POST" action="/ui/task_list/">
                                        <div class="col-lg-12">
                                            <div class="input-group">
                                              <input name="search_task_name" type="text" class="form-control" placeholder="任务名称" value="{{ search_task_name }}">
                                                <span class="input-group-btn">
                                                <button class="btn btn-primary" type="submit">搜索</button>
                                              </span>
                                            </div><!-- /input-group -->
                                        </div><!-- /.col-lg-12 -->
                                    </form>
                                </div>
                            </div>
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered table-hover" id="dataTables-example">
                                    <thead>
                                    <tr>
                                        <th>序号</th>
                                        <th>任务名称</th>
                                        <th>关键字参数</th>
                                        <th>定时配置</th>
                                        <th width="70px">任务状态</th>
                                        <th width="170px">操作</th>
                                    </tr>
                                    </thead>
                                    <tbody class="js_table">
                                    {% for row in obj %}
                                        <tr id="{{ row.id }}">
                                        <td>{{ row.id }}</td>
                                        <td>{{ row.name }}</td>
                                        <td>{{ row.kwargs }}</td>
                                        <td style="color: #3b87ee">{{ row.description }}(m/h/d/dM/MY)</td>


                                        {% if row.enabled %}
                                            <td style="background-color: green">已启用</td>
                                            <td>
                                                <button class="btn-info">停用</button>
                                                <button class="btn-primary" onclick="edit('{{ row.id  }}')">编辑</button>
                                                <button class="btn-danger" onclick="isDel('{{ row.id }}')">删除</button>
                                            </td>
                                        {% else %}
                                            <td style="background-color: red">已停用</td>
                                            <td>
                                                <button class="btn-info">启用</button>
                                                <button class="btn-primary" onclick="edit('{{ row.id  }}')">编辑</button>
                                                <button class="btn-danger" onclick="isDel('{{ row.id }}')">删除</button>
                                            </td>
                                        {% endif %}
                                    </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                            <ul class="pagination" id="pager">
                                {#上一页按钮开始#}
                                {# 如果当前页有上一页#}
                                {% if obj.has_previous %}
                                    {#  当前页的上一页按钮正常使用#}
                                    <li class="previous"><a href="/ui/task_list?page={{ obj.previous_page_number }}">&laquo;</a></li>
                                {% else %}
                                    {# 当前页的不存在上一页时,上一页的按钮不可用#}
                                    <li class="previous disabled"><a href="#">&laquo;</a></li>
                                {% endif %}
                                {#上一页按钮结束#}
                                {# 页码开始#}
                                {% for num in paginator.page_range %}

                                    {% if num == currentPage %}
                                        <li class="item active"><a href="/ui/task_list?page={{ num }}">{{ num }}</a></li>
                                    {% else %}
                                        <li class="item"><a href="/ui/task_list?page={{ num }}">{{ num }}</a></li>
                                    {% endif %}
                                {% endfor %}
                                {#页码结束#}
                                {# 下一页按钮开始#}
                                {% if obj.has_next %}
                                    <li class="next"><a href="/ui/task_list?page={{ obj.next_page_number }}">&raquo;</a></li>
                                {% else %}
                                    <li class="next disabled"><a href="#">&raquo;</a></li>
                                {% endif %}
                                {# 下一页按钮结束#}
                            </ul>
                        </div>
                    </div>
                    <!--End Advanced Tables -->
                </div>
            </div>
            <!-- /. 表格  -->
        </div>
        <!-- /. PAGE INNER  -->
    </div>
    <!--end 列表-->
<!--新建弹窗-->
<div class="modal fade" id="newTask" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">新建任务</h4>
            </div>
            <div class="modal-body">
                <!--内容-->
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label for="taskName" class="col-sm-2 control-label">任务名称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="taskName" placeholder="50个字符以内">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="envSel" class="col-sm-2 control-label">运行环境</label>
                        <div class="col-sm-10">
                            <select class="form-control" id="envSel">
                                <option value="none">请选择</option>
                                {% for env in env_list %}
                                    <option value="{{ env.id }}">{{ env.env_name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="proSel" class="col-sm-2 control-label">所属项目</label>
                        <div class="col-sm-10">
                            <select class="form-control" id="proSel">
                                <option value="none">请选择</option>
                                {% for project in project_list %}
                                    <option value="{{ project.id }}">{{ project.project_name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="suiteSel" class="col-sm-2 control-label">运行套件</label>
                        <div class="col-sm-10">
                            <select class="form-control" id="suiteSel">
                                <option value="none">请选择</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="cronTab" class="col-sm-2 control-label">定时配置</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="cronTab" maxlength="20" placeholder="crontab表达式，例如：11 * * * *">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="email" class="col-sm-2 control-label">接收邮件</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="email" placeholder="xx@qq.com,xx@163.com 半角逗号隔开,为空不发">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="info" class="col-sm-2 control-label"></label>
                        <div class="col-sm-10 js_message text-danger" id="info"></div>
                    </div>
                </form>
                <!--内容-->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" onclick="closeDown()">取消</button>
                <button type="button" class="btn btn-primary" onclick="createTask()">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!--end 新建弹窗-->
<!--编辑弹窗-->
<div class="modal fade" id="editTask" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">编辑任务</h4>
            </div>
            <div class="modal-body">
                <!--内容-->
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label for="edit_taskName" class="col-sm-2 control-label">任务名称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="edit_taskName" placeholder="50个字符以内">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="edit_envSel" class="col-sm-2 control-label">运行环境</label>
                        <div class="col-sm-10">
                            <select class="form-control" id="edit_envSel">
                                <option value="none">请选择</option>
                                {% for env in env_list %}
                                    <option value="{{ env.id }}">{{ env.env_name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="edit_proSel" class="col-sm-2 control-label">所属项目</label>
                        <div class="col-sm-10">
                            <select class="form-control" id="edit_proSel">
                                <option value="none">请选择</option>
                                {% for project in project_list %}
                                    <option value="{{ project.id }}">{{ project.project_name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="edit_suiteSel" class="col-sm-2 control-label">运行套件</label>
                        <div class="col-sm-10">
                            <select class="form-control" id="edit_suiteSel">
                                <option value="none">请选择</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="edit_cronTab" class="col-sm-2 control-label">定时配置</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="edit_cronTab" maxlength="20" placeholder="crontab表达式，例如：11 * * * *">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="edit_email" class="col-sm-2 control-label">接收邮件</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="edit_email" maxlength="50" placeholder="xx@qq.com,xx@163.com 半角逗号隔开,为空不发">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="edit_info" class="col-sm-2 control-label"></label>
                        <div class="col-sm-10 js_message text-danger" id="edit_info"></div>
                    </div>
                </form>
                <!--内容-->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" onclick="closeDown()">取消</button>
                <button type="button" class="btn btn-primary" id="edit-save">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!--end 编辑弹窗-->
<!--删除询问弹窗提示-->
<div class="modal fade" id="deleteObj" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title">删除任务</h4>
            </div>
            <div class="modal-body">
                <p>请确认是否删除任务</p>
                <p id='delMessage' class="js_DELmessage text-danger"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" onclick="closeDown()">取消</button>
                <button type="button" class="btn btn-primary" id="delButton">确定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!--end 删除询问弹窗提示-->
{% endblock %}